<template>
  <div class="coupons-container">
    <a-page-header title="My Coupons" sub-title="View and manage your coupons" class="custom-page-header"/>
    
    <!-- 优惠券类型切换 -->
    <a-tabs v-model:activeKey="activeTabKey" class="coupon-tabs">
      <a-tab-pane key="all" tab="All Coupons"></a-tab-pane>
      <a-tab-pane key="available" tab="Available Coupons"></a-tab-pane>
      <a-tab-pane key="used" tab="Used Coupons"></a-tab-pane>
      <a-tab-pane key="expired" tab="Expired Coupons"></a-tab-pane>
      <a-tab-pane key="exchange" tab="Exchange Coupons"></a-tab-pane>
    </a-tabs>

    <!-- 兑换入口横幅 -->
    <div v-if="activeTabKey !== 'exchange'" class="exchange-banner">
      <div class="exchange-banner-content">
        <div class="banner-text">
          <h3>Use points to exchange coupons</h3>
          <p>You currently have <span class="points-highlight">{{ userPoints }}</span> points available for exchange</p>
        </div>
        <a-button type="primary" @click="goToExchange" class="goto-exchange-btn">
          Exchange Coupons
        </a-button>
      </div>
    </div>
    
    <!-- 优惠券列表 -->
    <div class="coupon-list" v-if="activeTabKey !== 'exchange'">
      <!-- 优惠券列表加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-content">
          <a-spin />
          <div class="loading-text">You have no favorite coupons</div>
          <a-button type="primary" class="loading-button">Get Coupons</a-button>
        </div>
      </div>

      <a-row v-else :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(coupon, index) in filteredCoupons" :key="index">
          <div :class="['coupon-wrapper', getCouponStatusClass(coupon)]">
            <div class="coupon-card">
              <div class="coupon-left">
                <div class="coupon-value">
                  <template v-if="coupon.valueText && coupon.valueText !== 'Discount'">
                    <span class="currency">{{ coupon.valueText }}</span>
                    <span class="amount">{{ coupon.value }}</span>
                  </template>
                  <template v-else>
                    <span class="amount">{{ coupon.value }}</span>
                  </template>
                </div>
                <div class="coupon-condition">Min spend {{ coupon.minSpend }}</div>
              </div>
              <div class="coupon-right">
                <div class="coupon-name">{{ coupon.name }}</div>
                <div class="coupon-time">
                  <template v-if="typeof coupon.validTime === 'object' && coupon.validTime.formatted">
                    <DateFormatter :value="coupon.validTime.start" format="MM/DD/YYYY" /> to 
                    <DateFormatter :value="coupon.validTime.end" format="MM/DD/YYYY" />
                  </template>
                  <template v-else>
                    {{ coupon.validTime }}
                  </template>
                </div>
                <div class="coupon-status">{{ getCouponStatusText(coupon) }}</div>
                <a-button 
                  type="primary" 
                  :disabled="!coupon.isAvailable"
                  @click="useCoupon(coupon)"
                  class="use-btn"
                >
                  {{ coupon.isAvailable ? 'Use' : 'Unavailable' }}
                </a-button>
              </div>
              <div class="coupon-circle-top"></div>
              <div class="coupon-circle-bottom"></div>
              <div class="coupon-dash-line"></div>
              <div class="coupon-plum-blossom top-left"></div>
              <div class="coupon-plum-blossom top-right"></div>
              <div class="coupon-plum-blossom bottom-left"></div>
              <div class="coupon-plum-blossom bottom-right"></div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    
    <!-- 空状态展示 -->
    <div v-if="filteredCoupons.length === 0 && !loading && activeTabKey !== 'exchange'" class="empty-state">
      <a-empty description="No coupons" />
      <a-button type="primary" @click="goToExchange" class="empty-action-btn">
        Exchange Coupons
      </a-button>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-wrapper" v-if="filteredCoupons.length > 0 && activeTabKey !== 'exchange'">
      <a-pagination
        v-model:current="pagination.current"
        :total="pagination.total"
        :pageSize="pagination.pageSize"
        @change="handlePageChange"
      />
    </div>
    
    <!-- 优惠券兑换列表 -->
    <div class="exchange-coupon-list" v-if="activeTabKey === 'exchange'">
      <!-- 兑换页加载状态 -->
      <div v-if="exchangeLoading" class="loading-container">
        <div class="loading-content">
          <a-spin />
          <div class="loading-text">Loading available coupons</div>
        </div>
      </div>

      <div v-else>
        <a-empty v-if="exchangeCoupons.length === 0" description="No exchangeable coupons" />
        <a-row v-else :gutter="[24, 24]">
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(exchangeItem, index) in exchangeCoupons" :key="index">
            <div class="exchange-coupon-wrapper">
              <div class="coupon-card" :class="{
                'disabled': exchangeItem.disabled && !exchangeItem.ranOut && !exchangeItem.ended && !exchangeItem.received, 
                'received': exchangeItem.received,
                'ended': exchangeItem.ended,
                'ran-out': exchangeItem.ranOut
              }">
                <div class="coupon-left">
                  <div class="coupon-value">
                    <template v-if="exchangeItem.valueText && exchangeItem.valueText !== 'Discount'">
                      <span class="currency">{{ exchangeItem.valueText }}</span>
                      <span class="amount">{{ exchangeItem.value }}</span>
                    </template>
                    <template v-else>
                      <span class="amount">{{ exchangeItem.value }}</span>
                    </template>
                  </div>
                  <div class="coupon-condition">Min spend {{ exchangeItem.minSpend }}</div>
                  <div class="coupon-use-range">{{ exchangeItem.rangeText }}</div>
                  <div class="coupon-limit-info" v-if="exchangeItem.limit_num > 0">
                    Received {{ exchangeItem.receive_num }}/{{ exchangeItem.limit_num }} coupons
                  </div>
                </div>
                <div class="coupon-right">
                  <div class="coupon-name">{{ exchangeItem.name }}</div>
                  <div class="coupon-time">
                    <template v-if="exchangeItem.validTimeObj && exchangeItem.validTimeObj.formatted">
                      <DateFormatter :value="exchangeItem.validTimeObj.start" format="MM/DD/YYYY" /> to 
                      <DateFormatter :value="exchangeItem.validTimeObj.end" format="MM/DD/YYYY" />
                    </template>
                    <template v-else>
                      {{ exchangeItem.validTime }}
                    </template>
                  </div>
                  <div class="coupon-time" v-if="exchangeItem.activityTimeObj && exchangeItem.activityTimeObj.formatted">
                    <DateFormatter :value="exchangeItem.activityTimeObj.start" format="MM/DD/YYYY" /> to 
                    <DateFormatter :value="exchangeItem.activityTimeObj.end" format="MM/DD/YYYY" />
                  </div>
                  <div class="coupon-time" v-else-if="exchangeItem.activityTime">
                    {{ exchangeItem.activityTime }}
                  </div>
                  <div class="coupon-points">{{ exchangeItem.points }} points</div>
                  <div class="coupon-stock" v-if="exchangeItem.total_num > 0">
                    <span class="stock-text">Remaining quantity: </span>
                    <span class="stock-count">{{ exchangeItem.remain_num_display }}/{{ exchangeItem.total_num_display }}</span>
                  </div>
                  <a-button 
                    type="primary" 
                    :disabled="userPoints < exchangeItem.points || exchangeItem.disabled || (exchangeItem.limit_num > 0 && exchangeItem.receive_num >= exchangeItem.limit_num) || exchangeItem.ended || exchangeItem.ranOut"
                    @click="exchangeCoupon(exchangeItem)"
                    class="exchange-btn"
                  >
                    <template v-if="exchangeItem.limit_num > 0 && exchangeItem.receive_num >= exchangeItem.limit_num">Reached the limit</template>
                    <template v-else-if="exchangeItem.ended">Ended</template>
                    <template v-else-if="exchangeItem.ranOut">Sold out</template>
                    <template v-else-if="exchangeItem.disabled">Unavailable</template>
                    <template v-else-if="userPoints < exchangeItem.points">Points not enough</template>
                    <template v-else-if="exchangeItem.receive_num > 0">Redeem again</template>
                    <template v-else>Exchange now</template>
                  </a-button>
                </div>
                <div class="coupon-circle-top"></div>
                <div class="coupon-circle-bottom"></div>
                <div class="coupon-dash-line"></div>
                <div class="coupon-plum-blossom top-left"></div>
                <div class="coupon-plum-blossom top-right"></div>
                <div class="coupon-plum-blossom bottom-left"></div>
                <div class="coupon-plum-blossom bottom-right"></div>
              </div>
            </div>
          </a-col>
        </a-row>
        
        <!-- 兑换优惠券分页 -->
        <div class="pagination-wrapper" v-if="exchangeCoupons.length > 0">
          <a-pagination
            v-model:current="exchangePagination.current"
            :total="exchangePagination.total"
            :pageSize="exchangePagination.pageSize"
            @change="handleExchangePageChange"
          />
        </div>
      </div>
      
      <!-- 积分余额展示 -->
      <div class="points-balance">
        <div class="points-balance-card">
          <div class="points-label">Current points balance:</div>
          <div class="points-value">{{ userPoints }}</div>
          <a-button type="link" @click="goToPoints">Points details</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { useCurrencyStore } from '@/store';
import { Local } from '../../utils/storage.ts';
import { userPoints as getUserPoints, getUserPointsLogList, getCouponList, exchangeCoupon as apiExchangeCoupon, getMyCoupons } from '../../api/user';
import { formatDate } from '../../utils/date';
import DateFormatter from '@/components/common/DateFormatter.vue';

const router = useRouter();
const { proxy } = getCurrentInstance();
const useCurrency = useCurrencyStore();
const activeTabKey = ref('all');

// 用户积分
const userPoints = ref(0);
const pointsRecords = ref([]);
const pointsLoading = ref(false);

// 分页信息
const pagination = ref({
  current: 1,
  pageSize: 12,
  total: 0
});

// 积分记录分页
const pointsPagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
});

// 优惠券兑换分页
const exchangePagination = ref({
  current: 1,
  pageSize: 12, // 每页显示12个
  total: 0
});

// 优惠券数据
const coupons = ref([]);

// 加载状态
const loading = ref(false);

// 兑换优惠券数据
const exchangeCoupons = ref([]);
const exchangeLoading = ref(false);

// 初始化获取用户积分和优惠券
onMounted(async () => {
  fetchUserPoints();
  
  // 根据当前标签加载对应数据
  if (activeTabKey.value === 'exchange') {
    fetchExchangeCoupons();
  } else {
    fetchUserCoupons();
  }
});

// 获取用户积分
const fetchUserPoints = async () => {
  try {
    const res = await getUserPoints();
    if (res && res.code === 200) {
      userPoints.value = res.result.score || 0;
    } else {
      // 如果API调用失败，尝试从本地存储获取
      const userInfo = Local.get('userInfo');
      if (userInfo && userInfo.score !== undefined) {
        userPoints.value = userInfo.score;
      }
    }
  } catch (error) {
    console.error('Failed to fetch user points:', error);
    // 从本地存储获取作为备用
    const userInfo = Local.get('userInfo');
    if (userInfo && userInfo.score !== undefined) {
      userPoints.value = userInfo.score;
    }
  }
};

// 获取用户优惠券列表
const fetchUserCoupons = async () => {
  loading.value = true;
  try {
    // 准备请求参数
    const params = {
      page: pagination.value.current,
      limit: pagination.value.pageSize
    };
    
    // 如果不是查询全部，则添加status参数
    if (activeTabKey.value !== 'all') {
      params.status = getStatusByTab(activeTabKey.value);
    }
    
    const res = await getMyCoupons(params);
    
    if (res && res.code === 200) {
      // 更新分页信息
      pagination.value.total = res.result?.total || 0;
      
      // 格式化API返回的优惠券数据
      coupons.value = (res.result?.data || []).map(item => {
        // 判断优惠券状态
        const isExpired = item.status === 3; // 已过期
        const isUsed = item.status === 2; // 已使用
        const isAvailable = item.status === 1; // 待使用（可用）
        const isInvalid = item.status === 4; // 已失效
        
        // 格式化优惠券值显示
        let value = '';
        let valueText = '';
        if (item.discount_type === 1) { // 满减券
          // 使用货币转换函数来转换金额
          value = proxy.$ConvertPrice(parseFloat(item.discount_amount || 0), false, false);
          valueText = useCurrency.currentCurrency.unit;
        } else if (item.discount_type === 2) { // 折扣券
          value = (parseFloat(item.discount_ratio || 0) * 10) + ' off';
          valueText = 'Discount';
        }
        
        // 格式化有效期
        let validTime = '';
        if (item.start_time && item.end_time) {
          // 对于开始和结束时间，直接存储时间戳
          validTime = {
            start: item.start_time,
            end: item.end_time,
            formatted: true // 标记为可格式化日期
          };
        } else {
          validTime = 'No specified validity period';
        }
        
        // 返回优惠券对象
        return {
          id: item.id,
          name: item.name,
          value: value,
          valueText: valueText,
          minSpend: `${useCurrency.currentCurrency.unit}${proxy.$ConvertPrice(parseFloat(item.min_price) || 0, false, false)}`,
          isAvailable: isAvailable,
          isUsed: isUsed,
          isExpired: isExpired || isInvalid, // 已过期或已失效都显示为过期
          validTime: validTime,
          status: item.status,
          coupon_id: item.coupon_id
        };
      });
    } else {
      message.error('Failed to fetch coupons');
      coupons.value = [];
    }
  } catch (error) {
    console.error('Failed to fetch coupons:', error);
    message.error('Failed to fetch coupons');
    coupons.value = [];
  } finally {
    loading.value = false;
  }
};

// 根据Tab获取状态参数
const getStatusByTab = (tab) => {
  switch (tab) {
    case 'available': return 1; // 待使用
    case 'used': return 2; // 已使用
    case 'expired': return 3; // 已过期
    default: return undefined; // 全部不传status参数
  }
};

// 监听标签页变化，重新获取对应状态的优惠券
watch(() => activeTabKey.value, (newTab) => {
  if (newTab === 'exchange') {
    // 兑换标签只加载可兑换优惠券
    fetchExchangeCoupons();
  } else {
    // 其他标签加载用户优惠券
    pagination.value.current = 1; // 重置页码
    fetchUserCoupons(); // 获取对应状态的优惠券
  }
});

// 根据选中的 Tab 过滤优惠券
const filteredCoupons = computed(() => {
  if (activeTabKey.value === 'all') {
    return coupons.value;
  } else if (activeTabKey.value === 'available') {
    return coupons.value.filter(coupon => coupon.isAvailable);
  } else if (activeTabKey.value === 'used') {
    return coupons.value.filter(coupon => coupon.isUsed);
  } else if (activeTabKey.value === 'expired') {
    return coupons.value.filter(coupon => coupon.isExpired);
  }
  return coupons.value;
});

// 获取优惠券状态样式类
const getCouponStatusClass = (coupon) => {
  if (coupon.isExpired) return 'expired';
  if (coupon.isUsed) return 'used';
  return 'available';
};

// 获取优惠券状态文本
const getCouponStatusText = (coupon) => {
  if (coupon.isExpired) return 'Expired';
  if (coupon.status === 4) return 'Invalid';
  if (coupon.isUsed) return 'Used';
  return 'Available';
};

// 使用优惠券
const useCoupon = (coupon) => {
  if (!coupon.isAvailable) {
    message.warning('This coupon is currently unavailable');
    return;
  }
  // 将优惠券ID存入临时存储，或者直接传递给商品列表页面
  Local.set('currentCouponId', coupon.coupon_id);
  // 跳转到商品列表
  router.push('/products');
};

// 兑换优惠券
const exchangeCoupon = (coupon) => {
  if (userPoints.value < coupon.points) {
    message.error('Points not enough, cannot exchange');
    return;
  }
  
  // 调用API兑换优惠券
  apiExchangeCoupon({ id: coupon.id }).then(res => {
    if (res && res.code === 200) {
      message.success(`Successfully exchanged "${coupon.name}" coupon`);
      
      // 刷新用户积分
      fetchUserPoints();
      
      // 刷新可兑换优惠券列表
      fetchExchangeCoupons();
    } else {
      message.error(res?.message || 'Failed to exchange, please try again later');
    }
  }).catch(error => {
    console.error('Failed to exchange coupon:', error);
    message.error('Failed to exchange, please try again later');
  });
};

// 去积分页面
const goToPoints = () => {
  router.push('/user/points');
};

// 去兑换优惠券
const goToExchange = () => {
  activeTabKey.value = 'exchange';
};

// 分页变化
const handlePageChange = (page) => {
  pagination.value.current = page;
  fetchUserCoupons(); // 加载对应页的用户优惠券数据
};

// 兑换优惠券分页变化
const handleExchangePageChange = (page) => {
  exchangePagination.value.current = page;
  fetchExchangeCoupons(); // 加载对应页的数据
};

// 获取可兑换优惠券列表
const fetchExchangeCoupons = async () => {
  exchangeLoading.value = true;
  try {
    const res = await getCouponList(exchangePagination.value.current, exchangePagination.value.pageSize, 1);
  
    
    if (res && res.code === 200) {
      // 更新分页总数
      exchangePagination.value.total = res.result?.total || 0;
      
      // 格式化返回的数据
      exchangeCoupons.value = (res.result?.data || []).map((item) => {
        
        // 检查用户是否已领取该优惠券
        const userCoupons = Array.isArray(item.user_coupon) ? item.user_coupon : [];
        const isReceived = userCoupons.length > 0;
        // 已领取优惠券的数量
        const receiveNum = isReceived ? userCoupons.length : 0;
        // 检查库存是否已空
        const isRanOut = item.remain_num <= 0;
        // 检查活动是否已结束
        const now = Math.floor(Date.now() / 1000); // 当前时间戳（秒）
        const isEnded = item.active_end_time && now > item.active_end_time;
        
        // 格式化有效期显示
        let validTimeObj = null;
        let validTimeStr = '';
        if (item.expiry_type === 1 && item.start_time && item.end_time) { // 固定时间
          // 存储开始和结束时间戳供组件使用
          validTimeObj = {
            start: item.start_time,
            end: item.end_time,
            formatted: true
          };
          // 备用文本描述
          const startDate = formatDate(item.start_time, 'YYYY.MM.DD');
          const endDate = formatDate(item.end_time, 'YYYY.MM.DD');
          validTimeStr = `Valid period: ${startDate} to ${endDate}`;
        } else if (item.expiry_type === 2) { // 固定天数
          validTimeStr = `Valid within ${item.expiry_days || 0} days after receiving`;
        } else {
          // 提供默认值，避免显示--
          validTimeStr = 'No specified validity period';
        }
        
        // 活动有效期
        let activityTimeObj = null;
        let activityTimeStr = '';
        if (item.active_start_time && item.active_end_time) {
          // 存储开始和结束时间戳供组件使用
          activityTimeObj = {
            start: item.active_start_time,
            end: item.active_end_time,
            formatted: true
          };
          // 备用文本描述
          const startDate = formatDate(item.active_start_time, 'YYYY.MM.DD');
          const endDate = formatDate(item.active_end_time, 'YYYY.MM.DD');
          activityTimeStr = `Activity period: ${startDate} to ${endDate}`;
        } else {
          // 提供默认值，避免显示--
          activityTimeStr = 'No activity period specified';
        }
        
        // 根据优惠券类型设置值的文本和显示值
        let valueText = '';
        let value = '';
        
        
        if (item.discount_type === 1) { // 满减券
          // 使用货币转换函数转换金额
          value = proxy.$ConvertPrice(parseFloat(item.discount_amount || 0), false, false);
          valueText = useCurrency.currentCurrency.unit;
        } else if (item.discount_type === 2) { // 折扣券
          value = (parseFloat(item.discount_ratio || 0) * 10).toString() + ' off';
          valueText = 'Discount';
        }
        
        // 使用范围文本
        let rangeText = 'All products available';
        if (item.range_type === 2) {
          rangeText = 'Available for specified products';
        } else if (item.range_type === 3) {
          rangeText = 'Available for specified products';
        }
        
        // 格式化剩余数量和总数量，防止数字过大
        const formatNumber = (num) => {
          if (num > 9999) {
            return '9999+';
          }
          return num.toString();
        };
        
        const remain_num = formatNumber(item.remain_num || 0);
        const total_num = formatNumber(item.total_num || 0);
        
        const formattedCoupon = {
          id: item.id,
          name: item.name || 'Coupon',
          type: item.discount_type,
          value: value,
          valueText: valueText,
          minSpend: `${useCurrency.currentCurrency.unit}${proxy.$ConvertPrice(parseFloat(item.min_price) || 0, false, false)}`,
          validTime: validTimeStr,
          validTimeObj: validTimeObj,
          activityTime: activityTimeStr,
          activityTimeObj: activityTimeObj,
          rangeText: rangeText,
          points: item.score || 0,
          disabled: item.disabled || false,
          received: isReceived && (receiveNum >= item.limit_num),
          receive_num: receiveNum,
          limit_num: item.limit_num || 0,
          total_num: item.total_num || 0,
          remain_num: item.remain_num || 0,
          // 使用格式化后的数字用于显示
          remain_num_display: remain_num,
          total_num_display: total_num,
          ranOut: isRanOut,
          ended: isEnded || item.ended
        };
        
        return formattedCoupon;
      });
    } else {
      message.error('Failed to fetch exchangeable coupons');
      exchangeCoupons.value = [];
    }
  } catch (error) {
    console.error('Failed to fetch exchangeable coupons:', error);
    message.error('Failed to fetch exchangeable coupons');
    exchangeCoupons.value = [];
  } finally {
    exchangeLoading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.coupons-container {
  padding: 0 10px;
}

.custom-page-header {
  margin-bottom: 20px;
  
  :deep(.ant-page-header-heading-title) {
    color: #000;
    font-weight: bold;
    font-size: 24px;
  }
  
  :deep(.ant-page-header-heading-sub-title) {
    color: #666;
  }
}

.coupon-tabs {
  margin-bottom: 20px;
  
  :deep(.ant-tabs-nav) {
    &::before {
      border-bottom: 1px solid #f0f0f0;
    }
  }
  
  :deep(.ant-tabs-tab) {
    color: #666;
    font-size: 16px;
    
    &:hover {
      color: #000;
    }
    
    &.ant-tabs-tab-active .ant-tabs-tab-btn {
      color: #000;
      font-weight: bold;
    }
  }
  
  :deep(.ant-tabs-ink-bar) {
    background-color: #000;
  }
}

.coupon-list {
  margin-bottom: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.coupon-wrapper {
  padding: 15px 0;
  
  &.expired .coupon-card {
    background: linear-gradient(135deg, #999, #666);
    opacity: 0.7;
  }
  
  &.used .coupon-card {
    background: linear-gradient(135deg, #c0c0c0, #999);
    
    &::after {
      content: 'Used';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-30deg);
      font-size: 32px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.7);
      border: 5px solid rgba(255, 255, 255, 0.7);
      padding: 5px 10px;
      border-radius: 8px;
      z-index: 5;
    }
  }
}

.coupon-card {
  display: flex;
  background: linear-gradient(135deg, #ff7875, #ff4d4f);
  color: white;
  border-radius: 12px;
  overflow: hidden;
  height: 140px;
  position: relative;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
  transition: all 0.3s;
  width: 100%;
}

.coupon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(255, 77, 79, 0.4);
}

.coupon-left {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 5px;
  position: relative;
}

.coupon-right {
  flex: 1;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coupon-value {
  text-align: center;
}

.currency {
  font-size: 16px;
  vertical-align: top;
  margin-right: 2px;
}

.amount {
  font-size: 36px;
  font-weight: bold;
}

.coupon-condition {
  font-size: 14px;
  margin-top: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 10px;
}

.coupon-name {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  line-height: 1.3;
}

.coupon-time {
  font-size: 11px;
  margin-bottom: 3px;
  opacity: 0.9;
}

.coupon-range {
  font-size: 12px;
  margin-bottom: 5px;
  opacity: 0.9;
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
}

.coupon-points {
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
}

.coupon-status {
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
}

.use-btn {
  background-color: white;
  color: #ff4d4f;
  border: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 40px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.use-btn:hover:not(:disabled) {
  background-color: #f5f5f5;
  color: #ff4d4f;
}

.use-btn:disabled {
  background-color: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.25);
}

.coupon-circle-top, .coupon-circle-bottom {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  right: 40%;
  z-index: 1;
}

.coupon-circle-top {
  top: -10px;
}

.coupon-circle-bottom {
  bottom: -10px;
}

.coupon-dash-line {
  position: absolute;
  right: 40%;
  top: 0;
  height: 100%;
  border-left: 2px dashed rgba(255, 255, 255, 0.5);
  z-index: 0;
}

/* 梅花装饰 */
.coupon-plum-blossom {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 1;
  opacity: 0.3;
}

.coupon-plum-blossom::before,
.coupon-plum-blossom::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 50%;
}

.coupon-plum-blossom::before {
  transform: rotate(45deg);
}

.coupon-plum-blossom::after {
  transform: rotate(-45deg);
}

.top-left {
  top: 10px;
  left: 10px;
}

.top-right {
  top: 10px;
  right: 10px;
}

.bottom-left {
  bottom: 10px;
  left: 10px;
}

.bottom-right {
  bottom: 10px;
  right: 10px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.empty-action-btn {
  margin-top: 20px;
  background-color: #000;
  border-color: #000;
  
  &:hover {
    background-color: #333;
    border-color: #333;
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 20px;
  
  :deep(.ant-pagination-item-active) {
    border-color: #000;
    
    a {
      color: #000;
    }
  }
  
  :deep(.ant-pagination-item:hover) {
    border-color: #333;
    
    a {
      color: #333;
    }
  }
}

.exchange-coupon-list {
  margin-top: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.exchange-coupon-wrapper {
  padding: 15px;
}

/* 调整兑换优惠券的卡片大小和布局 */
.exchange-coupon-list .coupon-card {
  height: 200px;
}

.exchange-coupon-list .coupon-right {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.exchange-coupon-list .coupon-time {
  font-size: 12px;
  margin-bottom: 3px;
  line-height: 1.4;
  opacity: 0.9;
}

.exchange-coupon-list .coupon-points,
.exchange-coupon-list .coupon-stock {
  font-size: 14px;
  margin-bottom: 5px;
  padding: 3px 8px;
}

.exchange-coupon-list .coupon-name {
  font-size: 18px;
  margin-bottom: 6px;
  line-height: 1.3;
  max-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: bold;
}

.points-balance {
  margin-top: 20px;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
}

.points-balance-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.points-label {
  font-weight: bold;
}

.points-value {
  font-size: 24px;
  font-weight: bold;
}

.exchange-btn {
  background-color: #000 !important;
  color: #fff !important;
  border: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 40px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
}

.exchange-btn:hover:not(:disabled) {
  background-color: #333 !important;
  color: #fff !important;
}

.exchange-btn:disabled {
  background-color: #d9d9d9 !important;
  color: rgba(0, 0, 0, 0.25) !important;
  box-shadow: none;
}

.exchange-banner {
  background: linear-gradient(135deg, #ffebee, #ffe0e0);
  border: 1px solid #ffe0e0;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.1);
  position: relative;
  overflow: hidden;
}

.exchange-banner::before {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 77, 79, 0.1);
  border-radius: 50%;
  z-index: 0;
}

.exchange-banner::after {
  content: '';
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 80px;
  height: 80px;
  background-color: rgba(255, 77, 79, 0.1);
  border-radius: 50%;
  z-index: 0;
}

.exchange-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.banner-text {
  flex: 1;
}

.banner-text h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

.banner-text p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.goto-exchange-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  white-space: nowrap;
}

.goto-exchange-btn:hover:not(:disabled) {
  background-color: #ff3333;
}

.goto-exchange-btn:disabled {
  background-color: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.25);
}

.points-highlight {
  font-weight: bold;
  color: #ff4d4f;
}

/* 已领取的券 */
.coupon-card.received {
  background: linear-gradient(135deg, #b7b7b7, #8c8c8c);
  color: white;
  box-shadow: 0 4px 12px rgba(140, 140, 140, 0.3);
  position: relative;
}

.coupon-card.received::after {
  content: 'Received';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 28px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  border: 4px solid rgba(255, 255, 255, 0.6);
  padding: 5px 20px;
  border-radius: 8px;
  z-index: 2;
}

/* 已结束的券 */
.coupon-card.ended {
  background: linear-gradient(135deg, #b7b7b7, #8c8c8c);
  color: white;
  box-shadow: 0 4px 12px rgba(140, 140, 140, 0.3);
  position: relative;
}

.coupon-card.ended::after {
  content: 'Ended';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 28px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  border: 4px solid rgba(255, 255, 255, 0.6);
  padding: 5px 20px;
  border-radius: 8px;
  z-index: 2;
}

/* 已抢光的券 */
.coupon-card.ran-out {
  background: linear-gradient(135deg, #b7b7b7, #8c8c8c);
  color: white;
  box-shadow: 0 4px 12px rgba(140, 140, 140, 0.3);
  position: relative;
}

.coupon-card.ran-out::after {
  content: 'Sold out';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 24px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  border: 4px solid rgba(255, 255, 255, 0.6);
  padding: 5px 10px;
  border-radius: 8px;
  z-index: 2;
}

/* 禁用的券 */
.coupon-card.disabled {
  background: linear-gradient(135deg, #b7b7b7, #8c8c8c);
  color: white;
  box-shadow: 0 4px 12px rgba(140, 140, 140, 0.3);
  position: relative;
}

.coupon-card.disabled::after {
  content: 'Unavailable';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 28px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  border: 4px solid rgba(255, 255, 255, 0.6);
  padding: 5px 20px;
  border-radius: 8px;
  z-index: 2;
}

.coupon-limit {
  font-size: 12px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
}

.limit-count {
  font-weight: bold;
}

.limit-tag {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 5px;
}

.coupon-use-range {
  font-size: 12px;
  margin-top: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.coupon-limit-info {
  font-size: 12px;
  margin-top: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 已领取的券标识调整 */
.coupon-card.received::after,
.coupon-card.ended::after,
.coupon-card.ran-out::after,
.coupon-card.disabled::after {
  font-size: 22px;
  padding: 3px 10px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .coupon-list .coupon-card {
    height: 140px;
  }
}

@media (max-width: 768px) {
  .coupon-list .coupon-left {
    width: 35%;
  }
  
  .coupon-list .amount {
    font-size: 28px;
  }
  
  .coupon-list .coupon-condition {
    font-size: 11px;
  }
}

@media (max-width: 576px) {
  .coupon-list .coupon-card {
    height: 150px;
  }
  
  .coupon-list .coupon-left {
    width: 40%;
  }
  
  .coupon-list .coupon-right {
    padding: 12px;
  }
  
  .coupon-list .coupon-name {
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  .coupon-list .use-btn {
    height: 36px !important;
    font-size: 14px !important;
  }
}

/* 为兑换优惠券左侧部分增加特殊样式 */
.exchange-coupon-list .coupon-left {
  padding: 10px 5px;
  justify-content: flex-start;
  padding-top: 20px;
}

.exchange-coupon-list .coupon-value {
  margin-bottom: 5px;
}

.exchange-coupon-list .coupon-condition {
  margin-top: 5px;
  margin-bottom: 8px;
}

.exchange-coupon-list .coupon-use-range {
  font-size: 11px;
  margin-top: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.exchange-coupon-list .coupon-limit-info {
  font-size: 11px;
  margin-top: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 常规优惠券列表适配样式 */
.coupon-list .coupon-card {
  height: 130px;
}

.coupon-list .coupon-left {
  width: 38%;
  padding: 5px 3px;
}

.coupon-list .amount {
  font-size: 32px;
}

.coupon-list .coupon-condition {
  font-size: 12px;
  padding: 3px 6px;
  margin-top: 8px;
}

.coupon-list .coupon-right {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coupon-list .coupon-name {
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.2;
  max-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: bold;
}

.coupon-list .coupon-time {
  font-size: 11px;
  margin-bottom: 2px;
  line-height: 1.2;
}

.coupon-list .coupon-status {
  font-size: 12px;
  margin-bottom: 5px;
  padding: 2px 6px;
}

.coupon-list .use-btn {
  height: 32px !important;
  font-size: 12px !important;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  text-align: center;
  width: 100%;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-text {
  color: #666;
  font-size: 16px;
  margin-top: 10px;
}

.loading-button {
  margin-top: 10px;
}
</style> 